import { useNavigate } from "react-router-dom"
import '../style/microapp.css'

const pathlist = [
  {
    name: 'vue2App',
    path: '/microapp/vue2app'
  },
  {
    name: 'vue3App',
    path: '/microapp/vue3app'
  },
  {
    name: 'reactApp',
    path: '/microapp/reactapp'
  },
]

export default function Vuemicro () {
  const navigate = useNavigate()
  const changePath = (path) => {
    navigate(path)
  }
  
  return (
    <div>
      <h3>子应用选项</h3>
      <div className="list">
        {
          pathlist.map(item => (
            <span key={item.path} onClick={() => changePath(item.path)}>{ item.name }</span>
          ))
        }
      </div>
    </div>
  )
}